/**
 * @file PC端主布局样式
 */
@charset "UTF-8";

@use '../../variables' as *;

.axiom-pc-main-layout {
  display: flex;
  height: 100vh;
  width: 100%;
  background-color: var(--bg-color);
}

.axiom-pc-sidebar {
  width: var(--axiom-sidebar-width, 240px);
  flex-shrink: 0;
  background-color: var(--bg-color-secondary);
  border-right: 1px solid var(--border-color);
  transition: var(--axiom-pc-sidebar-transition, width 0.3s ease);
}

.axiom-pc-main-layout.sidebar-collapsed {
  .axiom-pc-sidebar {
    width: var(--axiom-sidebar-width-collapsed, 68px);
  }
}

.axiom-pc-main-content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  transition: margin-left var(--sidebar-transition-duration) ease;
  min-height: 0; // 关键修复：确保 flex item 可以收缩
}

.axiom-pc-page-content {
  flex-grow: 1;
  padding: var(--spacing-lg);
  display: flex;
  flex-direction: column;
}

.page-content-header, .page-content-footer {
  flex-shrink: 0;
}

.page-content-body {
  flex-grow: 1;
  position: relative; /* 1. 创建定位上下文 */
  display: flex;
  flex-direction: column;
  min-height: 0; // 防止 flex item 超出容器
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.view-is-animating {
  animation: var(--axiom-pc-view-fade-in-animation, fadeIn 0.2s ease-in-out);
}

// 应用头的样式应该由它自己决定，但我们可能需要一个 wrapper 来控制粘性定位
.axiom-pc-main-content > .axiom-pc-app-header {
  flex-shrink: 0;
  border-bottom: 1px solid var(--border-color);
  background-color: var(--axiom-pc-header-bg-color-alpha, rgba(255, 255, 255, 0.8));
  backdrop-filter: var(--axiom-pc-header-backdrop-filter, blur(8px));
  position: sticky;
  top: 0;
  z-index: var(--axiom-pc-header-z-index, 10);
}

// 无侧边栏时的布局调整
.axiom-pc-main-layout.no-sidebar {
  .axiom-pc-main-content {
    margin-left: 0 !important;
  }
}

// 当侧边栏折叠时 